<style lang="less">
body,
#app,
html {
  width: 100%;
  height: 100%;
}
.bg {
  background-size: 100%;
  background-repeat: no-repeat;
}
.btn {
  margin: auto;
  &:extend(.bg);
  width: 268px;
  height: 48px;
  font-size: 19px;
  color: #fff;
  line-height: 44px;
  text-align: center;
}
.page1 {
  background-image: url("../static/image/bg_01.jpg");
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  @red: #441f00;
  .centerBox {
    position: relative;
    top: 33.89%;
    width: 100%;
    color: @red;
  }
  .wordPhonex {
    background-image: url("../static/image/word_phonex.png?__inline");
    width: 319px;
    height: 30px;
    background-size: 100%;
    margin: auto;
  }
  .wordCall {
    font-size: 12px;
    color: @red;
    text-align: center;
    margin: 16px 0;
  }

  .btnCall1 {
    background-image: url("../static/image/btn_red.png?__sprite");
    &:extend(.btn);
    a {
      color: #fff;
    }
  }
  .btnOtherCity {
    &:extend(.btn);
    margin-top: 12px;
    background-image: url("../static/image/btn_purple.png?__sprite");
    a {
      color: #fff;
    }
  }
  .btnLinks {
    margin: auto;
    margin-top: 20px;
    font-size: 12px;
    text-align: center;
    color: @red;
    text-decoration: underline;
    width: 100%;
    text-align: center;
    display: block;
  }
}
</style>
<template>
<div class="page1">
  <vueHeader></vueHeader>
  <div class="centerBox" v-cloak>
  <div class="wordPhonex"></div>
  <div class="wordCall">系统检测到您现在在{{city}}，您今天还有1次打CALL机会</div>

  <div class="btnCall1">
        <router-link :to="'/my_city/'+code">为{{city}}打Call</router-link>
  </div>
  <div class="btnOtherCity">
      <router-link to="/cities">为其他省市自治区打CALL  </router-link>
  </div>

  <router-link class="btnLinks" :to="'/my_city/'+code+'/pop_amount'">我的CALL值与当前总CALL值</router-link>
  </div>
  </div> 
  
</template>

<script>
import ajaxData from "../static/modules/ajaxData";
import vueHeader from "./header";
import util from "../static/modules/util";
import wxUserInfo from "../static/modules/wxUserInfo";
export default {
  components: {
    vueHeader
  },
  data() {
    return {
      city: "",
      code: ""
    };
  },
  created() {
    this.checkInfo();
  },
  methods: {
    checkInfo() {
      var self = this;
      wxUserInfo.call(wxUserInfo, data => {
        self.init();
      });
    },
    init() {
      ajaxData.location2(data => {
        this.city = data.province;
        util.storage.setItem("my_city", this.city);
        this.code = data.code;
      });
    }
  }
};
</script>
